<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="google-site-verification" content="yaeorbXgKPwp5BDegBtAJEHYWFEFE-BViWTj74gJPrw" />
<!--  -->
<link href="/css/default.css" type="text/css" rel="stylesheet" />
<!--  -->
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/mac/core.js"></script>
<script type="text/javascript" src="/lang/cn.js"></script><title>JQuery MagicGrid&nbsp;文档</title>
<meta name="description" content="JQuery MagicTab Document" />
<meta name="keywords" content="JQuery Tab Plugin Document" />
<link href="/javascript/tabs/css/default.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/js/mac/tabs.js"></script>
<script type="text/javascript">
$(function(){
	$('#docTabs').mac('tabs',{
		items: [{
			code: 'overview',
			title: 'Overview',
			height: 'auto',
			el: $('#overview')
		},{
			code: 'options',
			title: 'Options',
			height: 'auto',
			el: $('#options')
		},{
			code: 'events',
			title: 'Events',
			height: 'auto',
			el: $('#events')
		},{
			code: 'methods',
			title: 'Methods',
			height: 'auto',
			el: $('#methods')
		}]
	}).selectFirst();
});
</script>
</head>
<body>
<style stype="text/css">
#head { height: 60px; background-color: #333; }
#head img { float: left; border: none; }
#head .right { float: right; height: 60px; color: #FFF; text-align: right; }
#head .right a { color: #CCC; font-size: 16px; color: #FFF; }
#head .title {
	color: #F93; float: left; height: 60px; line-height: 60px;
	font-size: 40px; font-family: Impact, 'Comic Sans MS';
}
#head a { color: #F93; text-decoration: underline; }
.hr { height: 12px; background: transparent url(/css/images/nm-b.png) repeat-x; }
</style>
<div id="head">
	<a href="/cn/"><img src="/css/images/logo_s.png" alt="logo of boarsoft.com" /></a>
	<div class="title"><a href="/cn/">boarsoft.com</a></div>
	<div class="right">
		<a href="/public/lang.php?l=en">English</a>
		|
		<a href="/public/lang.php?l=cn">简体中文</a>
		|
		<a href="http://www.jquery.com" target="_blank">JQuery</a>
		|
		<a href="http://www.jqueryui.com" target="_blank">JQuery UI</a>
		|
		<a href="http://code.google.com/p/dynatree/" target="_blank">JQuery Dynatree Plugin</a>
		&nbsp;&nbsp;
		<br/>
		<br/>
		This site has JQuery, Ext/Sencha Plugins, such as: Grid Combobox Tree Tabs&nbsp;&nbsp;<br/>
		Please use IE7+, FireFox, Chrome&nbsp;&nbsp;
	</div>
</div>
<div class="hr"></div><div id="nav">
	<div id="nav_path">
		&nbsp;&nbsp;
		<a href="/cn/">Home</a>
		&gt;
		<a href="/cn/javascript">Javascript</a>
		&gt;
		<a href="/cn/javascript/tabs">MagicTabs</a>
		&gt;
		文档	</div>
	<div id="nav_back">
		<a href="/cn/javascript/tabs">示例</a>
		|
		<a href="javascript:history.back()">后退</a>
		|
		<a href="/cn/javascript#tabs">下载</a>
		&nbsp;&nbsp;
	</div>
	<div class="clear"></div>
</div>
<div id="docTabs" class="tabs"></div>
<div id="overview">
简单好用的JQuery标签页插件
<a href="/cn/javascript/tabs">在线演示</a> 和
<a href="/cn/javascript#tabs">下载</a>
<ul>
	<li>支持静态、动态和远程装载内容三种方式。</li>
	<li>支持右键菜单，关闭、关闭其它，关闭全部等操作。</li>
	<li>允许为每个标签页设置不同类型的高度：适应组件，适应内容或固定值。</li>
	<li>支持用鼠标滚轮来滚动标签栏。</li>
	<li>样式可轻松自定义。</li>
</ul>
</div>
<div id="options">
	<h3><a href="#">speed</a></h3>
	<p>
		点击左右箭头时的滚动速度，默认为 6。
	</p>
	<h3><a href="#">tabWidth</a></h3>
	<p>
		标签页按钮的宽度，默认为 90。
	</p>
	<h3><a href="#">tabHeight</a></h3>
	<p>
		标签页按钮的高度，默认为 26。
	</p>
	<h3><a href="#">hbarHeight</a></h3>
	<p>
		标签页按钮下用于遮罩的横条的高度，主要用于自定义样式，默认为 2。
	</p>
	<h3><a href="#">各Tab的配置</a></h3>
	<p>
		<ul>
			<li>code: Tab name, 要求组件内唯一。</li>
			<li>title: 标签文字。</li>
			<li>
				height: 每个Tab页各自的高度。可选。
				<ul>
					<li>default: 标签页高度取决于组件的高度，并会随之而变化。</li>
					<li>auto: 标签页高度取决于它的内容。</li>
					<li>number: 标签页高度是固定的，不会随组件高度变化。</li>
				</ul> 
			</li>
			<li>el: 要放入标签对象元素或HTML片。</li>
			<li>url: 从哪个URL加载内容。可选。</li>
			<li>autoLoad: 是否自动加载。默认为 true。</li>
			<li>closeable: 是否允许关闭。默认为 true。</li>
			<li>bodyCls: 要添加到标签体上的CSS类。可选。</li>
		</ul>
	</p>
</div>
<div id="events">
	<h3><a href="#">onCloseTab(m, c, [a])</a></h3>
	<p>
		当关闭标签页时触发，返回false可以阻止它关闭。
		<ul>
			<li>m: 当前组件。</li>
			<li>c: 要关闭的Tab的名字。</li>
			<li>a: Tab的头对象，可选</li>
		</ul>
	</p>
	<h3><a href="#">onLoadPage(m, a, b, p)</a></h3>
	<p>
		当加载完Tab的页面内容时触发。
		<ul>
			<li>m: 当前组件。</li>
			<li>a: Tab头元素。 </li>
			<li>b: Tab主体元素。 </li>
			<li>p: Tab的配置对象</li>
		</ul>
	</p>
	<h3><a href="#">onShowPage(m, a, b, p)</a></h3>
	<p>
		当标签页被激活（切换到它）时触发。
		<ul>
			<li>m: 当前组件。</li>
			<li>a: Tab头元素。 </li>
			<li>b: Tab主体元素。 </li>
			<li>p: Tab的配置对象</li>
		</ul>
	</p>
</div>
<div id="methods">
	<h3><a href="#">closeTab(c, [a])</a></h3>
	<p>
		关闭某个标签页
		<ul>
			<li>c: 要关闭的标签页名字</li>
			<li>a: 要关闭的标签页按钮对象，可选</li>
		</ul>
	</p>
	<h3><a href="#">closeTabs([x])</a></h3>
	<p>
		关闭多个标签页。
		<ul>
			<li>x: 要排除的那个标签页的名字，可选</li>
		</ul>
	</p>
	<h3><a href="#">addTab(p, n)</a></h3>
	<p>
		添加一个标签页
		<ul>
			<li>p: 标签页配置</li>
			<li>n: 要插入的位置</li>
		</ul>
	</p>
	<h3><a href="#">scroll(a)</a></h3>
	<p>
		滚动到标签页，并选中它。
		<ul>
			<li>a: 标签页按钮元素(.item)</li>
		</ul>
	</p>
	<h3><a href="#">hscroll()</a></h3>
	<p>
		一个内部方法，调用它开始水平滚动标签页头部。
	</p>
	<h3><a href="#">select(c)</a></h3>
	<p>
		选中某个标签页。
		<ul>
			<li>c: 要选中的Tab的名字</li>
		</ul>
	</p>
	<h3><a href="#">selectFirst()</a></h3>
	<p>
		选中第一个标签页。
	</p>
</div><iframe src="/javascript/related.php" class="related"></iframe>
<div class="clear" style="height: 8px;"></div>
<div style="text-align: right;">
	Copyright © 2011. All rights reserved&nbsp;&nbsp;蜀ICP备11014774号-1&nbsp;&nbsp;
	QQ: 7213571&nbsp;&nbsp;MSN: pyh_jerry@163.com&nbsp;&nbsp;E-mail: pyh_jerry@163.com&nbsp;&nbsp;
<!--
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
-->
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-24473339-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Ffc0b0282216be3d16055855d8c0e72d9' type='text/javascript'%3E%3C/script%3E"));
</script>
	&nbsp;&nbsp;
</div></body>
</html>
